<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .data {
            text-align: center;
            border: 1px solid gray;
        }

        .data td {
            text-align: center;
            border: 1px solid gray;
            padding: 5px
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.get("account/list.do",function (data) {
                if(data.flag) {
                    let info = "";
                    for (let i = 0; i < data.data.length; i++) {
                        let account = data.data[i];
                        info += `<tr>
                                    <td>${account.id}</td>
                                    <td>${account.name}</td>
                                    <td>${account.money}</td>
                                 </tr>`
                    }
                    $("#account_info").html(info);
                }
            });
        });
    </script>
</head>
<body>
<center>
    <form action="account/save.do" method="post">
        <h1>添加用户信息</h1>
        <p>账户名：<input type="text" name="name"/></p>
        <p>余&nbsp;&nbsp;额：<input type="text" name="money"/></p>
        <p><input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置"></p>
    </form>
    <hr/>
    <h1>账户列表</h1>
    <table class="data">
        <thead>
        <tr>
            <td>编号</td>
            <td>账户名</td>
            <td>余额</td>
        </tr>
        </thead>
        <tbody id="account_info">
        <tr>
            <td colspan="3">
                暂无数据！
            </td>
        </tr>
        </tbody>
    </table>
</center>
</body>
</html>